var vm = new Vue({
    el: '#app',
    data: {
        list: '', //表格遍历的数据
        num: 1,
        key: '' //搜索条件
    },
    created(){
        this.getBrand();
    },
    mounted(){
        this.getTreeData();
    },
    watch:{
        key(){
            this.getBrand();
        }
    },
    methods:{
        getBrand(){
            $.ajax({
                url: 'brand/list',
                data: {
                    key: this.key
                },
                success: function (res) {

                    vm.list = res.list;
                    vm.num = 1;

                    //bootstrap 分页
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: res.page,
                        totalPages: res.totalPage,
                        size: "normal",
                        alignment: "center",
                        itemTexts:function(type,page, current){
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {

                            $.ajax({
                                url:'/brand/list', //点击分页提交当前页码
                                data:{
                                    page: page
                                },
                                success:function(data){
                                    vm.list = data.list;
                                    vm.num = (page -1) * 15 + 1;
                                }
                            })
                        }
                    };

                    $("#page").bootstrapPaginator(options);

                }
            });
        },

        //初始化树
        getTreeData(){

            $("[name='categoryTree']").tree({
                url:'category/list',
                method:'get',
                checkbox: true,
                lines: true,
                animate:true,
                formatter: function (data) {
                    return data.name;
                }
            });
        },

        //删除事件
        deleteBrand(index){

            // 表格当前行id
            var id = this.list[index].id;

            $.ajax({
                url: 'brand/moveBrand',
                type: 'post',
                data: {
                    id: id
                },
                dataType:"json",
                success: function (res) {

                }
            })
        }
    }
});

// 添加图片
$("[name='logo']").ace_file_input({
    style: 'well',
    btn_choose: '添加LOGO',
    btn_change: null,
    no_icon: 'ace-icon fa fa-cloud-upload',
    droppable: true,
    thumbnail: 'small'//large | fit
    //,icon_remove:null//set null, to hide remove/reset button
    /**,before_change:function(files, dropped) {
        //Check an example below
        //or examples/file-upload.html
        return true;
    }*/
    /**,before_remove : function() {
        return true;
    }*/
    ,
    preview_error : function(filename, error_code) {
        //name of the file that failed
        //error_code values
        //1 = 'FILE_LOAD_FAILED',
        //2 = 'IMAGE_LOAD_FAILED',
        //3 = 'THUMBNAIL_FAILED'
        //alert(error_code);
    }

}).on('change', function(){
    // console.log($(this).data('ace_input_files'));
    //console.log($(this).data('ace_input_method'));
});

// bootstrap 模态框 点击添加 显示弹出框
$('#addBrandForm').on('show.bs.modal', function (event) {

    // 添加提交
    $('#add_brand_submit').click(function(){

        var name = $('#addName').val();
        var letter = $('#addLetter').val();
        var id = $('#addCategoryTree').tree('getChecked')[0].id;
        var logo = $("#addLogo")[0].files[0];

        if (logo == undefined) {
            logo = "";
        };

        // 1、ajax 上传文件 参数必须放在 FormData 中
        var formData = new FormData();
        formData.append("name", name);
        formData.append("letter", letter);
        formData.append("categoryId", id);
        formData.append("logo", logo);

        $.ajax({
            url: 'brand/addBrand',
            dataType:'json',
            type:'POST',
            data: formData,
            processData : false, // 2、使数据不做处理
            contentType : false, // 3、不要设置Content-Type请求头
            success: function(data){

            }
        });

        $('#addBrandForm').modal('hide');
    });

});

var id = 0;

// bootstrap 模态框 点击修改 显示弹出框
$('#modifyBrandForm').on('show.bs.modal', function (event) {

    // 修改的数据回显
    id = event.relatedTarget.attributes.data.nodeValue;
    var name = event.relatedTarget.attributes.name.nodeValue;
    var letter = event.relatedTarget.attributes.letter.nodeValue;

    $('#modifyName').val(name);
    $('#modifyLetter').val(letter);

    $.get('/brand/queryCategoryIdByBrandId', {id: id},function (res) {

        // 查找一个节点并选择它
        var node = $('#modifyCategoryTree').tree('find', res);
        $('#modifyCategoryTree').tree('check', node.target);

    });

    // 修改提交
    $('#modify_brand_submit').click(function(){

        var name = $('#modifyName').val();
        var letter = $('#modifyLetter').val();
        var id = $('#modifyCategoryTree').tree('getChecked')[0].id;
        var logo = $("#modifyLogo")[0].files[0];

        if (logo == undefined) {
            logo = "";
        };

        // 1、ajax 上传文件 参数必须放在 FormData 中
        var formData = new FormData();
        formData.append("id", id);
        formData.append("name", name);
        formData.append("letter", letter);
        formData.append("categoryId", id);
        formData.append("logo", logo);

        $.ajax({
            url: 'brand/modifyBrand',
            dataType:'json',
            type:'POST',
            data: formData,
            processData : false, // 2、使数据不做处理
            contentType : false, // 3、不要设置Content-Type请求头
            success: function(data){

            }
        });

        $('#modifyBrandForm').modal('hide');
    });

});

// 隐藏弹出框
$('#modifyBrandForm').on('hidden.bs.modal', function (e) {

    $.get('brand/queryCategoryIdByBrandId', {id: id},function (res) {

        // 查找一个节点并取消选择
        var node = $('#modifyCategoryTree').tree('find', res);
        $('#modifyCategoryTree').tree('uncheck', node.target);

    });
});

